<!--
    - 名称：atom-theme
    - 功能：切换主题
-->

<template>
    <el-tooltip content="主题切换">
        <div @click="toggleTheme" class="p-2 cursor-pointer rounded-md bg-transparent hover:bg-[var(--el-fill-color-light)]">
            <el-icon  :size="20">
                <Sunny v-if="theme === 'light'"/>
                <Moon v-else/>
            </el-icon>
        </div>
    </el-tooltip>
</template>

<script setup>
import {Sunny, Moon} from '@element-plus/icons-vue'
import {onMounted} from "vue";
import {storeToRefs} from 'pinia'
import {useThemeStore} from '@/stores/theme';

const store = useThemeStore()
const {theme} = storeToRefs(store);
const {toggleTheme, setTheme} = store;
onMounted(() => {
    setTheme(theme.value)
})
</script>


<style scoped lang="less"></style>